<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    productType: {
      type: Array,
      default: () => []
    },
    annualOutput: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    productType(newVal) {
      if(newVal.length > 0) {
        this.setOptions()
      }
    },
    annualOutput(newVal) {
      if(newVal.length > 0) {
        this.setOptions()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if ( !this.chart ) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions()
    },
    setOptions() {
      const colorList = ['#FDC324', '#6F65E8', '#62EBB7', '#67C7FF', '#FF7E69', '#F8E710', '#A560FF']
      // const data = [120, 200, 150, 80, 70, 110, 130]
      const data = this.annualOutput
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器配置项。
            type: 'none', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
          },
          renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
          // backgroundColor: 'rgba(111, 101, 232, 0.1333)', // 提示框浮层的背景颜色。
          borderColor: '#333', // 提示框浮层的边框颜色。
          borderWidth: 0, // 提示框浮层的边框宽。
          padding: 5, // 提示框浮层内边距，
          textStyle: { // 提示框浮层的文本样式。
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14,
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
          confine: false, // 是否将 tooltip 框限制在图表的区域内。
          // formatter: '{b} 的成绩是 {c}'
          formatter: function (arg) {
            return arg[0].value + '吨/年'
          }
        },
        xAxis: {
          type: 'category',
          data: this.productType
        },
        yAxis: {
          type: 'value',
          name: '产量（吨）',
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(102, 102, 102, 1)',
              fontSize: 12
            }
          }
        },
        series: [
          {
            data: data.map((item, index) => {
              return {
                value: item,
                itemStyle: {
                  color: colorList[index]
                }
              }
            }),
            type: 'bar',
            barWidth: 30,
          }
        ]
      };
      this.chart.setOption(option);
    }
  }
}
</script>
